<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
	<title>INDEX</title>
	<style>
	    .wrap1{
		    position:relative;
			display:inline-block;/*使行内元素也能设置宽高*/
		}
		.wrap2{
		    display:none;
			position:absolute;/*设置相对位置，防止位置错误*/
			padding:8px;
			box-shadow:4px 4px 20px 0 rgba(0,0,0,0.3);/*设置阴影*/
			/*阴影左移位置，阴影右移位置，阴影模糊边界，阴影边界，阴影颜色*/
			min-width:120px;/*最小宽度*/
			z-index:3;
		}
		.wrap3{
		    display:none;
			position:absolute;
			padding:12px;
			box-shadow:4px 4px 20px 0 rgba(255,0,0,0.3);
			min-width:160px;
			z-index:1;
		}
		.wrap1:hover .wrap2{
		    display:block;
		}
		.wrap2:hover .wrap3{
		    display:block;
		}
	</style>
</head>
<body>
    <div class="wrap1">
	    <span>将鼠标移到这里</span>
		<div class="wrap2">
		    <span>Hollow! World.</span>
			<div class="wrap3">en!</div>
		</div>
	</div>
</body>
</html>